{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "products/vpn/base.html" %}

{% block page_title_full %}{{ ftl('vpn-landing-invite-page-title') }}{% endblock %}
{% block page_title_suffix %}{% endblock %}

{% block page_desc %}{{ ftl('vpn-landing-invite-page-desc-v2') }}{% endblock %}

{% block body_id %}mozilla-vpn-invite{% endblock %}

{% block page_css %}
  {{ css_bundle('mozilla-vpn-invite') }}
{% endblock %}

{% block site_header %}
  {% with
    hide_nav_download_button=True,
    hide_nav_get_vpn_button=True
  %}
    {% include 'includes/protocol/navigation/navigation.html' %}
  {% endwith %}
{% endblock %}

{% block content %}
<main class="mzp-l-content mzp-t-content-md">
  <form id="newsletter-form" class="mzp-c-newsletter-form" action="{{ action }}" method="post" data-testid="vpn-invite-form">
    <h1 class="mzp-c-form-header">{{ ftl('vpn-landing-invite-page-heading') }}</h1>
    <p class="mzp-c-form-subtitle">{{ ftl('vpn-landing-invite-page-desc-v2') }}</p>
    <div hidden>
      {{ newsletter_form.newsletters|safe }}
    </div>
    <input type="hidden" name="source_url" value="{{ request.build_absolute_uri() }}">

    <fieldset class="mzp-c-newsletter-content">
      <div class="mzp-c-form-errors hide-from-legacy-ie hidden" id="newsletter-errors" data-testid="vpn-invite-error-message">
        <ul class="mzp-u-list-styled">
          <li class="error-email-invalid hidden">{{ ftl('newsletter-form-please-enter-a-valid') }}</li>
          <li class="error-select-country hidden">{{ ftl('newsletter-form-please-select-country') }}</li>
          <li class="error-select-language hidden">{{ ftl('newsletter-form-please-select-language') }}</li>
          <li class="error-try-again-later hidden">{{ ftl('newsletter-form-we-are-sorry-but-there') }}</li>
        </ul>
      </div>

      <div>
        <label for="id_email">
          {{ ftl('vpn-landing-invite-email-label') }}
          <em class="mzp-c-fieldnote">{{ ftl('vpn-landing-invite-required-label') }}</em>
        </label>
        <input type="email" class="mzp-js-email-field" id="id_email" name="email" required aria-required="true" autocomplete="email" placeholder="{{ ftl('vpn-landing-invite-email-placeholder') }}" data-testid="vpn-invite-email-input">
      </div>

      <div id="newsletter-details" class="mzp-c-newsletter-details">
        <label for="id_country">
          {{ ftl('vpn-landing-invite-country-label') }}
          <em class="mzp-c-fieldnote">{{ ftl('vpn-landing-invite-required-label') }}</em>
        </label>
        {{ newsletter_form.country|safe }}

        <label for="id_lang">
          {{ ftl('vpn-landing-invite-language-label') }}
          <em class="mzp-c-fieldnote">{{ ftl('vpn-landing-invite-required-label') }}</em>
        </label>
        {{ newsletter_form.lang|safe }}
      </div>

      <p class="mzp-c-form-submit">
        <button class="mzp-c-button mzp-t-xl" id="newsletter-submit" type="submit" data-cta-text="Join the Waitlist" data-testid="vpn-invite-submit-button">{{ ftl('vpn-shared-waitlist-link') }}</button>
      </p>

      <div class="vpn-invite-privacy">
        <p>{{ ftl('vpn-landing-invite-privacy-policy', privacy=url('privacy.notices.subscription-services')) }}</p>

        <p>{{ ftl('vpn-landing-invite-your-information') }}</p>
      </div>
    </fieldset>

  </form>

  <div id="newsletter-thanks" class="vpn-invite-success hidden" data-testid="vpn-invite-thanks-message">
    <h3>{{ ftl('vpn-landing-invite-thanks-heading') }}</h3>
    <p>{{ ftl('vpn-landing-invite-thanks-desc') }}</p>
  </div>
</main>
{% endblock %}

{% block js %}
  {{ js_bundle('mozilla-vpn-invite') }}
{% endblock %}
